<template>
  <div class="class">
    <h2>商品分类</h2>
    <div class="box">
      <section v-for="(v, i) in arr" :key="i">{{ v }}</section>
    </div>
  </div>
</template>

<script>
export default {
  computed:{
    arr(){
      if(this.$store.state.Sou.hotlei.length!=0){
        return this.$store.state.Sou.hotlei;
      }else{
        return null; 
      }
    }
  }
};
</script>

<style scoped>
.class{
  color: #6c7a85;
  padding: 0 15rem;
}
h2{
  margin-top: 17rem;
  margin-bottom: 1rem;
}
.box{
  display: flex;
  flex-wrap: wrap;
}
section{
  padding: 0 16rem;
  height: 27.67rem;
  line-height: 27.67rem;
  background: #e5e5e7;
  border-radius: 13.83rem;
  margin-right: 5.8rem;
  margin-left: 5.8rem;
  margin-top: 8rem;
}
</style>
